<template>
  <div id="index">
    <div style="height: 100%;">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else style="width: 100%;height: 95%;display: flex;flex-direction:column">
        <!--      标题部分-->
        <Row :gutter="2">
          <Col span="24">
            <title-data :para="now"></title-data>
          </Col>
        </Row>
        <!--          图表部分-->
        <Row :gutter="2" style="flex-grow: 1;">
          <Col span="6" style="height: 100%">
            <!--全所跨网数据交换,左一图-->
            <div style="height: 50%">
              <get-component :index="1" :componentsArr="componentsArr"></get-component>
            </div>

            <!--          各业务系统交换数据分布，左二图-->
            <div style="height: 50%">

              <get-component :index="2" :componentsArr="componentsArr"></get-component>
            </div>


          </Col>
          <Col span="12" style="height: 100%">
            <!-- 基本信息-->
            <div class="row_2_div">
              <div class="part_div">
                <base-data :para="baseData"></base-data>
              </div>
            </div>
          </Col>
          <Col span="6" style="height: 100%">
            <!--          各部门审批驳回数量统计-->
            <div style="height: 50%">

              <get-component :index="4" :componentsArr="componentsArr"></get-component>
            </div>

            <!--          各部门导入导出数量统计-->
            <div style="height: 50%">

              <get-component :index="5" :componentsArr="componentsArr"></get-component>
            </div>
          </Col>
        </Row>
        <Row :gutter="2">
          <Col span="6" style="height: 100%">
            <!--各时段交换数据分布-->
            <get-component :index="3" :componentsArr="componentsArr"></get-component>
          </Col>
          <!-- 各状态数据统计-->
          <Col span="12">
            <div class="row_3_div">
              <div class="part_div">
                <state-data :para="stateData"></state-data>
              </div>
            </div>
          </Col>
          <Col span="6" style="height: 100%">
            <!--业务系统任务数据大小-->
            <get-component :index="6" :componentsArr="componentsArr"></get-component>

          </Col>
        </Row>
      </div>
    </div>
  </div>
</template>
<script>
  import getComponent from './get-component'

  import stateData from '../state-data/state-data'
  import baseData from '../base-data/base-data'

  import Fullscreen from '@/components/main/components/fullscreen/fullscreen'
  import TitleData from '../title-data/title-data'
  import configurationDrawer from '../configurationDrawer/configurationDrawer'
  import '../common/common.less'
  import bus from '../common/configurationProperties'
  import {getConfigArr} from '../common/screen-tool'

  export default {
    data () {
      return {
        //业务系统
        businessSystemCount: 'dataSizeProportion',
        //数量统计
        statisticalnum: 'approvalRejectCount',
        componentsArr: [],
        drawerdisplay: false,
        loading: true,
        timer: null,
        nowTimer: '',
        full: false,
        now: {
          nowDate: '',
          nowTime: '',
          nowWeek: '',
        },
        //基础信息
        baseData: { id: 'base-data', title: '网络分布' },
        //各状态数据统计
        stateData: { id: 'state-data', title: '我也不知道的统计' },

      }
    },
    components: {
      getComponent,
      TitleData,
      stateData,
      baseData,
      Fullscreen,
      configurationDrawer,
    },
    created () {
      var me = this
      this.nowTimer = setInterval(function () {
        me.getNowFormatDate()
      }, 1000)
    },
    mounted () {
      this.cancelLoading()
      this.getNowFormatDate()
      this.getComponentsArr() //获取描述页面各组件的json数据

    },
    filters: {},

    methods: {
      getCom (index) {
        let comObj = this.componentsArr[index - 1]
        return {
          comName: comObj.comName,
          comData: comObj.data
        }
      },
      getComponentsArr () {
        //如果有缓存，先从缓存里获取数据，否则，从configurationDrawer组件中获取
        // let configurationManageData = window.localStorage.getItem('configurationManageData') == null ? configurationDrawer.data().dataArr : JSON.parse(window.localStorage.getItem('configurationManageData')).dataArr
        let configurationManageData = configurationDrawer.data().dataArr
        this.componentsArr = getConfigArr(configurationManageData)

        bus.$on('mydata', res => {
          //监听configurationDrawer组件中的确认按钮，点击时调用一次此方法
          this.componentsArr = getConfigArr(res.dataArr)
        })
      },
      goBack () {
        this.$router.go(-1)
      },
      getNowFormatDate () {
        let myDate = new Date()
        let wk = myDate.getDay()
        let yy = String(myDate.getFullYear())
        let mm = myDate.getMonth() + 1
        let dd = String(myDate.getDate() < 10 ? '0' + myDate.getDate() : myDate.getDate())
        let hou = String(myDate.getHours() < 10 ? '0' + myDate.getHours() : myDate.getHours())
        let min = String(myDate.getMinutes() < 10 ? '0' + myDate.getMinutes() : myDate.getMinutes())
        let sec = String(myDate.getSeconds() < 10 ? '0' + myDate.getSeconds() : myDate.getSeconds())
        let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
        let week = weeks[wk]
        this.now.nowDate = yy + '-' + mm + '-' + dd
        this.now.nowTime = hou + ':' + min + ':' + sec
        this.now.nowWeek = week
      },
      cancelLoading () {
        setTimeout(() => {
          this.loading = false
        }, 0)
      },
    },
    watch: {},
    beforeDestroy () {
      if (this.nowTimer) {
        clearInterval(this.nowTimer) //Vue实例销毁前，清除定时器
      }
    },

  }
</script>

<style lang="less" scoped>
  #index {
    color: #d3d6dd;
    width: 100%;
    height: 100%;
    padding: 0 1vw 1vh 1vw;
    background-image: url("../../../assets/images/large-screen/bg.jpg");
    background-size: 100% 100%;
  }

  .row_2_div {
    height: 98.5vh*0.3*2;
  }

  .row_3_div {
    height: 98.5vh*0.3;
  }

  .part_div {
    height: 100%
  }

  /deep/ .ivu-drawer-close .ivu-icon-ios-close {
    color: white;
  }
</style>
